import { useTitle } from 'ahooks'
import style from './index.less'
import React, { useEffect, useState } from 'react'
import SRC from '@/images/clves/address.png'
import Buy from '@/images/clves/buy.png'
import Wu from '@/images/clves/weizhi.png'
import Tu from '@/images/clves/invoice.png'
import { Ellipsis } from 'antd-mobile'
import Item from './.item'

interface receiptDto {
    id: string,
    name: string,
    address: string,
    phone: string
}
interface dataDto {
    id: string;
    goodsName: string;
    shopping: string;
    menuName: string;
    unitPrice: string;
    amount: string;
    totalMoney: string;
    picture: string;
    city: string;
    qu: string;
    origin: string;
    time: string;
}
export default () => {
    useTitle('订单详情')
    const [receiptData, setReceiptData] = useState<receiptDto[]>([]);
    const [data, setData] = useState<dataDto[]>([]);
    const dataList = [
        {
            id: '1',
            goodsName: '需要萝卜 白萝卜附近的卡拉接口附近的卡拉胶恩,阿凡达数据库连接',
            shopping: '四季化肥批发',
            menuName: '白萝卜',
            city: '重庆市',
            qu: '巴南区',
            unitPrice: '3.20',
            amount: '1000000',
            totalMoney: '16000',
            picture: '',
            origin: '内蒙古巴彦淖尔市',
            time: '2022-07-15 12:40'
        },]
    const receipt = [{
        id: '1',
        name: '张德志',
        address: '重庆市渝北区黄山大道中段双鱼座B座18楼',
        phone: '12345678910'
    }]
    useEffect(() => {
        setReceiptData(receipt)
        setData(dataList)
    }, [])
    return (
        <div className={style.page}>
            <div>
                {receiptData.map((item) => (
                    <div
                        key={item.id}
                        className={style.address}
                    >
                        <div className={style['address-title']}>
                            <img src={SRC} alt='alt' />
                            收获信息
                        </div>
                        <div className={style['address-bottom']}>
                            <div>
                                <span className={style.write}>{item?.name}</span>
                                {item?.phone}
                            </div>
                            <div>{item?.address}</div>
                        </div>
                    </div>
                ))}
            </div>
            <div className={style.po}>
                {data.map((item) => (
                    <div
                        key={item.id}
                        className={style['list-item']}
                    >
                        <div>
                            <div className={style['con-tt']}>
                                <img src={Buy} alt='SRC' />
                                <span>{item?.shopping}</span>
                                <span className={style['status-a']}>待买家确认</span>
                                <span className={style.status}>待确认</span>
                            </div>
                            <div className={style.con}>
                                <div className={style['con-left']}>
                                    {item?.picture ? (
                                        <img src={item?.picture} alt="商品图片" />
                                    ) : <img src={Wu} alt='无' />}
                                </div>
                                <div className={style['con-right']}>
                                    <div className={style.name}>
                                        <Ellipsis direction='end' content={item?.goodsName} rows={2} />

                                    </div>
                                    <div className={style.name}>
                                        <span className={style.type}>{item?.menuName}</span>
                                        <span className={style.red}>
                                            <img src={Tu} alt='src' className={style.src} />
                                            不支持在线开票
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div className={style['box-top']}>
                                <div className={style['box-list']}>
                                    <span className={style.names}>买家出价</span>
                                    <span className={style.red}>{item?.unitPrice}元/斤</span>
                                </div>
                                <div className={style['box-list']}>
                                    <span className={style.names}>数量</span>
                                    <span>×{item?.amount}</span>
                                </div>
                                <div className={style['box-list']}>
                                    <span className={style.names}>合计金额</span>
                                    <span className={style.money}>￥{Number(item?.totalMoney).toFixed(2)}</span>
                                </div>
                            </div>
                            <div className={style['box-bottom']}>
                                <div className={style['box-list']}>
                                    <span className={style.names}>产地</span>
                                    <span >
                                        {item?.city}
                                        {item?.qu}
                                    </span>
                                </div>
                                <div className={style['box-list']}>
                                    <span className={style.names}>发货地</span>
                                    <span>{item?.origin}</span>
                                </div>
                                <div className={style['box-list']}>
                                    <span className={style.names}>支付方式</span>
                                    <span className={style.money}>{item?.time}</span>
                                </div>
                                <div className={style['box-list']}>
                                    <span className={style.names}>订单创建时间</span>
                                    <span className={style.money}>{item?.time}</span>
                                </div>
                                <div className={style['box-list']}>
                                    <span className={style.names}>订单完成时间</span>
                                    <span className={style.money}>{item?.time}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
            <div className={style.bottom}>
                <Item data={{
                    id: undefined,
                    negotiationState: ''
                }} callback={function (): void {
                    throw new Error('Function not implemented.')
                }} />
            </div>
        </div>
    )
}
